<template>
  <div class="box">
    <div class="top">
      <div class="cont">
        <div class="cont">
          <p class="route-text">
            <img src="../assets/home.png" class="home" alt="" @click="toHome">
            <span class="span-margin">/</span>
            <span>公告</span>
            <span class="span-margin">/</span>
            <span>公告详情</span>
          </p>
          <p class="title">公告详情</p>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- <trainList :list="list"></trainList> -->
      <p class="policy-title">{{res.newsTitle}}</p>
      <p class="policy-time"><span>发布时间：{{res.createTime | timeFormat("YYYY-MM-DD ")}}</span><span>{{res.pageView}}次浏览</span></p>
      <div class="content-text" v-html="res.newsContent"></div>
    </div>
  </div>
  
</template>

<script>
  import Swiper from "../components/swiper.vue"
  import trainList from "../components/trainList.vue"
  import {
    newsDetail
  } from "@/api/newsdetail"
  export default {
    components: {
      Swiper,
      trainList
    },
    data() {
      return {
        list: [],
        id: 1,
        res:{}
      }
    },
    methods: {
      toHome(){
        this.$router.push("/")
      },
      newsDetail() {
        newsDetail({
          id: this.id
        }).then(res => {
          this.res = res.result;
        })
      }
    },
    mounted() {
      this.id = this.$route.query.id;
      this.newsDetail();
    },
    created() {}
  }
</script>

<style scoped="scoped">
  .box {
    width: 100%;
  }

  .top {
    width: 100%;
    height: 120px;
    background-color: #106470;
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cont {
    width: 1200px;
    margin: 0 auto;
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 0 15px;
    box-sizing: border-box;
    min-height: 360px;
  }

  .route-text {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    line-height: 26px;
    color: #FFFFFF;
    height: 55px;
    display: flex;
    align-items: center;
  }

  .span-margin {
    margin: 0 6px;
  }

  .home {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    line-height: 26px;
    color: #FFFFFF;
    margin-top: 10px;
  }

  .name-text {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 31px;
    color: #000000;
    margin-bottom: 20px;
  }

  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 28px;
    color: #333333;
  }

  .policy-title {
    margin: 0 auto;
    width: 830px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 38px;
    color: #000000;
    text-align: center;
  }

  .policy-time {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 19px;
    color: #999999;
    text-align: center;
    margin-top: 15px;
  }

  .policy-time span:first-child {
    margin-right: 20px;
  }

  .content-text{
    margin-top: 30px;
  }
</style>
